import React, {useState, useRef} from 'react'

export default function App5() {
    const [value,setValue] = useState('asd')
        const clickFn = ()=> console.log(value)
        const element =useRef(null)
    return (
        <div>
            <input type="text" value={value} onChange={(e)=>setValue(e.target.value)} />
            <button onClick={clickFn}>获取input的值</button>
            <hr />
            <h3>不受控组件</h3>
            <input type="text" ref={element}/>
            <button onClick={()=>console.log(element.current.value)}>获取值</button>
        </div>
    )
}
// 受控组件和不受控组件:
// 受控组件和不受控组件只存在于表单元素
// 所谓的受控组件就是表单元素的value需要通过state来定义
// 不受控组件意味着表单元素的value无法通过绑定value获取，只能使用useRef